<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./CSS/reset.css">
    <title>京东左侧导航条</title>
    <style>
        body{
            background-color: #f4f4f4;
        }
        .nav-list{
            width: 190px;
            height: 450px;
            padding: 10px 0px;
            background-color: #fefefe;
            margin: 100px auto;

        }
        .nav-list .item{
            height: 25px;
            font-size: 14px;
            line-height: 25px;
            padding-left:18px ;
        }
        .nav-list .item:hover{
           background-color: #d9d9d9;
        }
        .nav-list .item span{
            font-size: 12px;
            padding: 0px 2px;
        }
        .nav-list .item a{
           color:#333;
           text-decoration: none;
        }
        .nav-list .item a:hover{
            color:#c81623
        }
    </style>
</head>
<body>
    <div class="nav-list">
        <div class="item">
            <a href="">家用电器</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
        </div>
        <div class="item">
            <a href="">工业品</a>
        </div>
       
    </div>
</body>
</html>